<!-- 货源详情 -->
<template>
    <div class=''>
        <el-form ref="form" :model="form" label-width="120px" class="custom-form">
            <el-form-item label="货源编号">
                <el-input class="custom-input" type="text" :value="form.id" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="发货地">
                <el-input type="text" :value="form.ship_address + form.detail_address" placeholder=""
                    readonly></el-input>
            </el-form-item>
            <el-form-item label="收货地">
                <el-input type="text" :value="form.to_address + form.to_detail_address" placeholder=""
                    readonly></el-input>
            </el-form-item>
            <el-form-item label="所属车型">
                <el-input type="text" :value="form.models" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="所属车长">
                <el-input type="text" :value="form.chechang" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="截止日期">
                <el-input type="text" :value="form.end_time" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="货物名称">
                <el-input type="text" :value="(config && config.goodsType) ? config.goodsType[form.types] : form.type"
                    placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="货物重量">
                <el-input type="text" :value="form.weight + (form.danwei ? form.danwei : '吨')" placeholder=""
                    readonly></el-input>
            </el-form-item>
            <el-form-item label="运费类型">
                <el-input type="text" v-if="form.huo_price_type == 0" :value="'面议'" placeholder="" readonly></el-input>
                <el-input type="text" v-else-if="form.huo_price_type == 1" :value="'固定单价'" placeholder=""
                    readonly></el-input>
                <el-input type="text" v-else-if="form.huo_price_type == 2" :value="'司机抢单'" placeholder=""
                    readonly></el-input>
            </el-form-item>

            <el-form-item label="运费单价">
                <el-input type="text" v-if="form.huo_price_type == 1" :value="form.huo_price" placeholder=""
                    readonly></el-input>
                <el-input type="text" v-else :value="'---'" placeholder="" readonly></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-input type="text" v-if="form.zt == 0" :value="'已上架'" placeholder="" readonly></el-input>
                <el-input type="text" v-else :value="'已下架'" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="text" :value="form.remark" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="联系人">
                <el-input type="text" :value="form.con_name" placeholder="" readonly></el-input>
            </el-form-item>
            <el-form-item label="联系人电话">
                <el-input type="text" :value="form.con_phone" placeholder="" readonly></el-input>
            </el-form-item>

            <div class="imgs-box">
                <div class="box">
                    <div class="title">货物图片1:</div>
                    <el-image style="width: 300px; height: 300px" :src="form.hpic" fit="cover"
                        :preview-src-list="[form.hpic]">
                        <div slot="error" class="image-slot">
                            <span>暂无图片</span>
                        </div>
                    </el-image>
                </div>
                <div class="box">
                    <div class="title">货物图片2:</div>
                    <el-image style="width: 300px; height: 300px" :src="form.hpic2" fit="cover"
                        :preview-src-list="[form.hpic2]">
                        <div slot="error" class="image-slot">
                            <span>暂无图片</span>
                        </div>
                    </el-image>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import { sourceDetail } from '@/api/businessUser/release'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ['row', 'config'],
    data() {
        //这里存放数据
        return {
            form: {

            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async sourceDetail() {
            let res = await sourceDetail({
                hyid: this.row.id
            });
            if (res.code == 200) {
                this.form = res.data;
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.sourceDetail();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.custom-form {
    display: flex;
    flex-wrap: wrap;

    ::v-deep .el-form-item {
        width: 32%;

    }
}

.imgs-box {
    width: 100%;
    display: flex;

    .box {
        width: 33%;
        display: flex;
        padding: 36px;

        &>.title {
            font-weight: 700;
        }

        ::v-deep .image-slot {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f5f7fa;
        }
    }

}
</style>